import React from 'react';
import PropType from 'prop-types';
import { observer, inject } from 'mobx-react';
import WR from '../../stores/weichat_recommend'
import './index.scss';

import WeichatListItem from './weichat_list_item';

@inject((stores) => {
  const store = {
    wr: stores.wr,
  }
  return store
})
@observer
class RecommendArc extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weichatList: [],
    }
  }
  componentDidMount() {
    this.getList();
  }
  componentWillUnmount() {
    this.props.wr.cancel()
  }
  getList() {
    const { count, cateId } = this.props
    this.props.wr.getWr(cateId, count)
  }
  asyncBootstrap() {
    return new Promise((resolve, reject) => {
      const { count, cateId } = this.props
      this.props.wr.getWr(cateId, count)
        .then(() => {
          resolve(true)
        })
        .catch(reject)
    })
  }
  render() {
    const weichatList = this.props.wr.weichatList.get(`list${this.props.cateId}1`)
    return (
      <div className="recommend-arc">
        <span className="title-text">
            微信推荐
        </span>
        <ul className="weichat-list">
          { weichatList && weichatList.length ? weichatList.map(item => (
            <WeichatListItem data={item} key={item.id} />
            )) :
          <div className="loading">加载中...</div>
          }
        </ul>
      </div>
    )
  }
}
export default RecommendArc;
RecommendArc.propTypes = {
  count: PropType.number,
  cateId: PropType.number,
  wr: PropType.instanceOf(WR),
}
